<template>
  <div>
    <section>
      <!-- 背景颜色 -->
      <div class="color"></div>
      <div class="color"></div>
      <div class="color"></div>
      <div class="box">
        <!-- 登录框 -->
        <div class="container">
          <form>
            <div class="text-gradient">欢迎登录</div>

            <div class="inputBox">
              <el-input
                v-model="userForm.username"
                placeholder="用户名"
                style="width: 300px"
              />
            </div>
            <div class="inputBox">
              <el-input
                v-model="userForm.password"
                placeholder="密码"
                style="width: 300px"
              />
            </div>
            <el-form-item prop="code">
              <span
                ><i
                  class="iconfont icon-icon_anquan"
                  style="font-size: 25px"
                ></i
              ></span>

              <el-input
                class="codeText"
                type="text"
                auto-complete="false"
                v-model="userForm.code"
                placeholder="点击图片更换验证码"
                style="width: 60%; margin-left: 10px"
                @keyup.enter.native="login()"
              ></el-input>
              <el-image
                class="codeImg"
                :src="imgUrl"
                @click="resetImg"
              ></el-image>
            </el-form-item>

            <div @click="login" class="btn">提交</div>
          </form>
        </div>
      </div>
      
      <a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备2023112859号-1</a>
    </section>
  </div>
</template>

<script>
import request from "@/utils/request";
import router from "@/router";
import store from "@/store";
import { ElMessage } from "element-plus";
import userApi from "../api/user";

export default {
  data() {
    return {
      userForm: {
        username: "123",
        password: "123456",
        code: "",
      },
      imgUrl: "/api/user/code?"+this.number,
      number: 0
    };
  },
created () {
  this.resetImg(this.number);
},
  methods: {
    async login() {
      await request
        .post("/user/login", this.userForm)
        .then((res) => {
          if (res.code === 100002) {
            ElMessage({
              showClose: true,
              message: " 用户名或密码错误,请重新输入 ",
              type: "error",
            });
          } else if (res.code === 200) {
            request.get("/user/info").then((res) => {
              store.commit("SETLOGINFO", res.data.userNick);
              ElMessage({
                showClose: true,
                message: res.data.userNick + " 欢迎你的使用 ",
                type: "success",
              });
            });
            this.$store.commit("LOGIN", res.data);
            router.push({ path: "/" });
          } else if(res.code ===100006){
            this.userForm.code = ""
            this.resetImg()
          }
        })
        .catch((err) => {
          //错误捕获
          ElMessage({
            showClose: true,
            message: " 未知原因,请稍后再试！",
            type: "error",
          });
        });
    },
    resetImg(number) {

      this.imgUrl = "/api/user/code?"+this.number;
      this.number+=1
    },
    
  },
};
</script>

<style scoped src="@/assets/css/login.css"></style>
